<template>
	<view class="content">
		<view class="top-box">
			<view class="tab-bar">
				<view class="one-bar" :class="{'active':showIndex==0}" @click="chooseThis(0)">
					進行中
				</view>
				<view class="one-bar" :class="{'active':showIndex==1}" @click="chooseThis(1)">
					已完成</view>
				<view class="one-bar" :class="{'active':showIndex==2}" @click="chooseThis(2)">
					已取消</view>
				<view class="bottom-bar"  :style="{left:bottomLeft+'px'}"></view>
			</view>
		</view>
		<view class="order-list-box">
			<swiper class="swiper-box" :style="{height:scrollHeight+'px'}"  :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item style="height: 100%;width: 100%;" class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="one-order" v-for="(item,index) in underwayOrder" :key='index' @click="showOrderInfor(item.order_no)">
							<view class="title">
								<view>進行中</view>
								<image src="../../static/image/index/open-order.png" mode=""></image>
							</view>
							<view class="order-infor">
								<view class="address">
									<view class="start-point"></view>
									<view>{{item.start_address}}</view>
								</view>
								<view class="address">
									<view class="end-point"></view>
									<view>{{item.end_address}}</view>
								</view>
							</view>
							<view class="call-customer">
								<view class="customer-infor">
									<image src="../../static/image/index/head-logo.png" mode=""></image>
									<view>{{item.passenger_username}}</view>
								</view>
								<image class="call" @click.stop="call(item.passenger_phone)" src="../../static/image/index/call.png" mode=""></image>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item  style="height: 100%;width: 100%;" class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="one-order" v-for="(item,index) in overOrder" :key='index'  @click="showOrderInfor(item.order_no)">
							<view class="title">
								<view>已完成</view>
								<image src="../../static/image/index/open-order.png" mode=""></image>
							</view>
							<view class="order-infor">
								<view class="address">
									<view class="start-point"></view>
									<view>{{item.start_address}}</view>
								</view>
								<view class="address">
									<view class="end-point"></view>
									<view>{{item.end_address}}</view>
								</view>
							</view>
							<view class="call-customer">
								<view class="customer-infor">
									<image src="../../static/image/index/head-logo.png" mode=""></image>
									<view>{{item.passenger_username}}</view>
								</view>
								<image class="call" @click.stop="call(item.passenger_phone)" src="../../static/image/index/call.png" mode=""></image>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item style="height: 100%;width: 100%;" class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="one-order" v-for="(item,index) in clearOrder" :key='index'  @click="showOrderInfor(item.order_no)">
							<view class="title">
								<view>已取消</view>
								<image src="../../static/image/index/open-order.png" mode=""></image>
							</view>
							<view class="order-infor">
								<view class="address">
									<view class="start-point"></view>
									<view>{{item.start_address}}</view>
								</view>
								<view class="address">
									<view class="end-point"></view>
									<view>{{item.end_address}}</view>
								</view>
							</view>
							<view class="call-customer">
								<view class="customer-infor">
									<image src="../../static/image/index/head-logo.png" mode=""></image>
									<view>{{item.passenger_username}}</view>
								</view>
								<image class="call" @click.stop="call(item.passenger_phone)" src="../../static/image/index/call.png" mode=""></image>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import { orderList } from '../../request/api.js';
	export default {
		data() {
			return {
				showIndex: 0,
				swiperCurrent:0,
				scrollHeight:0,
				bottomLeft:0,
				oldleft:0,
				clearOrderNum:'',
				showClear:false,
				statusList:[
					{
						name:"進行中",
						id:'进行中'
					},
					{
						name:"已完成",
						id:'已完成'
					},
					{
						name:'已取消',
						id:"已取消"
					},
				],
				underwayOrder:[
					
				],
				overOrder:[
					
				],
				clearOrder:[
					
				],
				pageNum:1,
				current:0,
				pageSize:0,
				showLoading:false,
				loadStatus:'loadmore'
			};
		},
		onReady() {
			uni.createSelectorQuery().select('.order-list-box').boundingClientRect(data => {
				this.scrollHeight=data.height;
			}).exec()
		},
		onShow() {
			this.chooseThis(0)
		},
		onLoad(option) {
			if(option.index){
				this.chooseThis(option.index)
			}
		},
		methods: {
			// 联系客户
			call(e){
				let that = this;
				uni.makePhoneCall({
					// 手机号
					phoneNumber:e,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
						that.call(e); //重复调用一次
					}
				});
			},
			// 获取订单列表
			async getList(e){
				this.pageNum=1;
				this.showLoading=false;
				this.current=this.statusList[e].id
				uni.showLoading({
					title:'加载中'
				})
				let res=await orderList({
					page: this.pageNum,
					limit: 10,
					status: this.current
				})
				console.log(res);
				uni.hideLoading();
				if(res.code==1){
					if(e==0){
						this.underwayOrder=res.data.data;
					}else if(e==1){
						this.overOrder=res.data.data;
					}else{
						this.clearOrder=res.data.data;
					}
					this.pageSize=res.data.last_page;
				}
			},
			// 显示订单详情
			async showOrderInfor(e){
				uni.navigateTo({
					url:'/pages/order-details/order-details?orderNum='+e
				})
			},
			async onreachBottom(){
				if (this.pageNum < this.pageSize) {
					this.pageNum++;
					this.showLoading=true;
					let res=await getOrderList({
						page: this.pageNum,
						limit: 10,
						status: this.current
					})
					this.showLoading=false;
					if(res.code==1){
						if(this.showIndex==0){
							this.underwayOrder.push.apply(this.underwayOrder, res.data.data);
						}else if(this.showIndex==1){
							this.overOrder.push.apply(this.overOrder, res.data.data);
						}else{
							this.clearOrder.push.apply(this.clearOrder, res.data.data);
						}
						this.pageSize=res.data.last_page;
					}
				}else{
					this.showLoading=true;
					this.loadStatus='nomore';
				}
			},
			chooseThis(e) {
				this.showIndex = e;
				this.swiperCurrent = e;
				this.getList(this.showIndex);
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx/3;
				this.bottomLeft=this.oldleft+dx;
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.showIndex =current;
				this.swiperCurrent = current;
				this.oldleft=this.bottomLeft;
				if(this.mineInfor){
					this.getList(current);
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100vh;
	}

	.content {
		background-color: #fafafa;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		.top-box {
			width: 100%;
			height: 76rpx;
			background-color: #ffffff;
			box-sizing: border-box;

			.tab-bar {
				height: 76rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;

				.one-bar {
					flex: 1;
					display: flex;
					align-items: center;
					height: 70rpx;
					font-size: 30rpx;
					color: #040404;
					justify-content: center;
					transition: all .3s;
					position:relative;
				}

				.active {
					font-size: 30rpx;
					color:#D71B0A;
				}

				.bottom-bar {
					position: absolute;
					width: 35rpx;
					height: 5rpx;
					margin-left:107rpx;
					border-radius: 3rpx;
					background-color: #D71B0A;
					bottom: 0;
				}
			}
		}
		.order-list-box{
			flex:1;width:100%;
			.one-order{
				width:702rpx;background-color: #ffffff;
				border-radius: 15rpx;box-shadow: 0 2rpx 12rpx 0 rgba(204,204,204,0.3);
				margin-top:24rpx;padding:0 24rpx;box-sizing: border-box;
				margin-left:auto;margin-right:auto;
				.title{
					height:90rpx;display: flex;align-items: center;
					justify-content: flex-end;font-size: 24rpx;color:#9E9E9E;
					image{
						width:20rpx;height:20rpx;
					}
				}
				.order-infor{
					border-top:1px solid rgba(42,49,67,.1);border-bottom:1px solid rgba(42,49,67,.1);
					padding-bottom:24rpx;
					.address{
						padding-top:24rpx;display: flex;align-items: center;
						font-size:26rpx;line-height:37rpx;color:#040404;
						.start-point{
							width:16rpx;height:16rpx;background-color: #D71B0A;
							border-radius: 50%;margin-right:26rpx;
						}
						.end-point{
							width:16rpx;height:16rpx;background-color:#FC9A03;
							border-radius: 50%;margin-right:26rpx;
						}
					}
				}
				.call-customer{
					height:130rpx;display: flex;align-items: center;
					justify-content: space-between;
					.customer-infor{
						display: flex;align-items: center;font-size:30rpx;
						color:#333333;
						image{
							width:78rpx;height:78rpx;margin-right:14rpx;
						}
					}
					.call{
						width:60rpx;height:60rpx;
					}
				}
			}
		}
	}
</style>